<template>
  <div class="sub-app-container">
    <h2>主应用 - 子应用1页面</h2>
    <div class="app-controls">
      <button @click="sendMessage">向子应用发送消息</button>
      <button @click="unmountApp">卸载子应用</button>
      <button @click="mountApp">挂载子应用</button>
    </div>

    <div v-if="showApp" class="sub-app-wrapper">
      <WujieVue
        ref="subAppRef"
        name="sub-app1"
        url="http://localhost:3002"
        :publicPath="`http://localhost:3002/`"
        width="1000px"
        height="600px"
        :props="{
          token: mainToken,
          userInfo: mainUserInfo,
          onMessage: handleSubAppMessage
        }"
        @mounted="handleMounted"
        @unmounted="handleUnmounted"
        @error="handleError"
      />
    </div>

    <div class="message-area">
      <h3>消息区域</h3>
      <div v-for="msg in messages" :key="msg.id" class="message-item">
        <span class="msg-sender">{{ msg.sender }}:</span>
        <span class="msg-content">{{ msg.content }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import WujieVue from "wujie-vue3";

// 子应用引用
const subAppRef = ref(null);
const showApp = ref(true);
const messages = ref([]);
let messageId = 1;

// 主应用数据
const mainToken = ref("main-app-token-123456");
const mainUserInfo = ref({
  id: 1,
  name: "MainAppUser",
  role: "admin"
});

// 向子应用发送消息
const sendMessage = () => {
  const message = `主应用发送的消息 ${new Date().toLocaleTimeString()}`;
  messages.value.push({
    id: messageId++,
    sender: "主应用",
    content: message
  });

  // 通过无界实例发送消息到子应用
  if (subAppRef.value) {
    subAppRef.value.instance.getWindow().$wujie?.props?.emit("message", message);
  }
};

// 处理子应用发送的消息
const handleSubAppMessage = (data) => {
  messages.value.push({
    id: messageId++,
    sender: "子应用1",
    content: data
  });
};

// 挂载子应用
const mountApp = () => {
  showApp.value = true;
};

// 卸载子应用
const unmountApp = () => {
  showApp.value = false;
};

// 子应用挂载完成
const handleMounted = (appWindow) => {
  console.log("子应用1挂载完成", appWindow);
  messages.value.push({
    id: messageId++,
    sender: "系统",
    content: "子应用1已加载完成"
  });
};

// 子应用卸载完成
const handleUnmounted = () => {
  console.log("子应用1卸载完成");
  messages.value.push({
    id: messageId++,
    sender: "系统",
    content: "子应用1已卸载"
  });
};

// 子应用加载错误
const handleError = (err) => {
  console.error("子应用1加载错误", err);
  messages.value.push({
    id: messageId++,
    sender: "系统",
    content: `子应用1加载错误: ${err.message}`
  });
};
</script>

<style scoped>
.sub-app-container {
  padding: 20px;
}

.app-controls {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
}

.sub-app-wrapper {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.message-area {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.message-item {
  margin: 5px 0;
  padding: 5px;
  background-color: #f9f9f9;
  border-radius: 3px;
}

.msg-sender {
  font-weight: bold;
  margin-right: 10px;
  color: #333;
}

.msg-content {
  color: #666;
}
</style>
